<template>
  <button @click="care" class="care" v-show="props.status === 'none' || status1 === 1">关注</button>
  <button @click="nocare" class="nocare" v-show="props.status === 'follow' || status1 === 2">已关注</button>
  <button @click="nocare" class="nocare" v-show="props.status === 'both' || status1 === 3">互相关注</button>
</template>

<script setup>
import { ref } from 'vue';
// 判断状态
const status1 = ref(0)
const emit = defineEmits(['care', 'nocare'])
const props = defineProps({
  status: {
    type: String
  }
});
// 点击关注按钮
const care = () => {
  console.log(props.status);
  if (props.status === 'both') {
    status1.value = 3
  } else {
    status1.value = 2
  }
  emit('care')
}
// 点击取消按钮
const nocare = () => {
  status1.value = 1
  emit('care')
}
</script>

<style scoped>
button {
  position: absolute;
  right: -270px;
  top: 40px;
  font-size: 12px;
  color: #fff;
  background-color: #f8355f;
  width: 70px;
  height: 25px;
  border: 0;
}

.nocare {
  background: #383b44 !important;
}
</style>